<template>
  <div>
    <!-- form表单 -->
    <el-form ref="addForm" label-width="95px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学科" prop="subject">
            <el-select v-model="userInfo.subject" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.subject"
                :value="item.subject"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="目录" prop="catalog">
            <el-select v-model="userInfo.catalogID" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.catalog"
                :value="item.catalog"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="标签" prop="tags">
            <el-select v-model="userInfo.tags" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.tags"
                :value="item.tags"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="list.keyword" style="width: 220px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="试题类型" prop="questionType">
            <el-select v-model="userInfo.questionType" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.questionType"
                :value="item.questionType"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="难度" prop="difficulty">
            <el-select v-model="userInfo.difficulty" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.difficulty"
                :value="item.difficulty"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="方向" prop="direction">
            <el-select v-model="userInfo.direction" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.direction"
                :value="item.direction"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="录入人" prop="creatorID">
            <el-select v-model="userInfo.creatorID" placeholder="请选择">
              <el-option
                v-for="(item, index) in list"
                :key="index"
                :label="item.creator"
                :value="item.creator"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="题目备注" prop="remarks">
            <el-input v-model="list.remarks" style="width: 220px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业简称" prop="enterprise">
            <el-input
              v-model="userInfo.enterprise"
              style="width: 220px"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="城市"
            prop="province"
            class="city"
            @change.native="getArea"
          >
            <el-select v-model="userInfo.province" placeholder="请选择">
              <el-option
                v-for="(item, i) in provincesList"
                :key="i"
                :label="item.city"
                :value="item.city"
              ></el-option>
            </el-select>
            <el-select v-model="userInfo.city" placeholder="请选择">
              <el-option
                v-for="(item, i) in cityList"
                :key="i"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <div class="el-form-item__content">
            <el-button @click="eliminate"> 清除 </el-button>
            <el-button type="primary" @click="search"> 搜索 </el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <!-- 提示信息 -->
    <el-alert
      :closable="false"
      :title="`数据一共${total}条`"
      type="info"
      left
      show-icon
    />
    <!-- 数据列表 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalogID" label="目录" width="120">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120">
        <template #default="scope">
          <p v-if="scope.row.questionType == '1'">单选</p>
          <p v-else-if="scope.row.questionType == '2'">多选</p>
          <p v-else>简答</p>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template #default="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="120">
        <template #default="scope">
          {{ fromTime(scope.row.addDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120">
        <template #default="scope">
          <p v-if="scope.row.difficulty == '1'">简单</p>
          <p v-else-if="scope.row.difficulty == '2'">一般</p>
          <p v-else>困难</p>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template #default="scope">
          <p v-if="scope.row.chkState == '0'">待审核</p>
          <p v-else-if="scope.row.chkState == '1'">已审核</p>
          <p v-else>已拒绝</p>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="120">
        <template #default="scope">
          <p v-if="scope.row.publishState == '1'">上架</p>
          <p v-else>下架</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button @click="preview(scope.row.id)" type="text" size="small"
            >预览</el-button
          >
          <!-- 审核 -->
          <el-button
            :disabled="isDisabled(scope.row.chkState)"
            @click="check(scope.row.id)"
            type="text"
            size="small"
            >审核</el-button
          >
          <!-- 修改 -->
          <el-button @click="change(scope.row.id)" type="text" size="small"
            >修改</el-button
          >
          <!-- 上架 -->
          <el-button
            @click="publish(scope.row)"
            v-html="showWord(scope.row.publishState)"
            type="text"
            size="small"
            >上架</el-button
          >
          <!-- 删除 -->
          <el-button
            :disabled="isDelete(scope.row.publishState)"
            type="text"
            size="small"
            @click="Delete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      style="text-align: right; margin-top: 20px; margin-bottom: 15px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.page"
      :page-sizes="[10, 20, 30]"
      :page-size="query.pagesize"
      layout="prev, pager, next, sizes, jumper"
      background
      :total="total"
    >
    </el-pagination>
    <!-- 预览功能 -->
    <Preview
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      :questionItem="questionItem"
    />
    <!-- 试题审核 -->
    <Check
      :showPreview="showPreview"
      @close-dialog="closeDialog"
      :cur-id="curId"
    />
  </div>
</template>

<script>
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions.js'// 获取数据列表、详情预览、上下架、删除
import Preview from './questions-preview.vue'// 详情预览组件
import Check from './questions-check.vue'// 试题审核对话框
import { datas } from '@/api/hmmm/citys.js'// 城市列表
export default {
  components: {
    Preview,
    Check
  },
  props: {
    type: { // 要显示的tab栏
      type: String,
      default: '3'
    }
  },
  data () {
    return {
      list: [],
      listQuery: { // 获取列表的参数
        page: '1',
        pagesize: 10,
        chkState: +this.type
      },
      loading: false,
      dialogVisible: false, // 预览弹窗
      showPreview: false, // 审核弹窗
      questionItem: {}, // 预览的数据
      curId: null, // 当前行id
      isDisabled (state) { // 控制审核按钮
        if (state === 0) {
          return false
        } else {
          return true
        }
      },
      // 删除按钮是否禁用
      isDelete (state) {
        if (state === 1) {
          return true
        } else {
          return false
        }
      },
      // 分页器数据
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      // from表单数据123
      userInfo: {
        // 学科
        subjectID: '',
        // 目录
        catalog: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 录入人
        creator: '',
        // 题目备注
        remarks: '',
        // 企业简称
        enterprise: '',
        // 城市
        city: '',
        // 省份
        province: ''
      },
      // 城市
      provincesList: datas,
      // 地区
      cityList: {},
      // 列表数据123
      searchList: []
    }
  },
  created () {
    this.getList()// 获取列表
  },
  watch: {
    // 监视城市变化
    'userInfo.province': function () {
      this.getArea()
    }
  },
  methods: {
    // 获取列表数据
    getList () {
      this.loading = true
      if (this.listQuery.chkState === 3) {
        choice(this.query).then(response => {
          this.list = response.data.items
          // console.log(this.list)
          this.loading = false
          this.total = response.data.counts
          this.userInfo = response.data.items
        })
      } else {
        choice(this.listQuery).then(response => {
          this.searchList = response.data.items
          this.list = this.searchList
          this.loading = false
          this.total = response.data.counts
        })
      }
    },
    // 录入时间格式转换
    fromTime (timer) {
      // console.log(timer)
      var jsonDate = new Date(timer).toJSON()
      return new Date(new Date(jsonDate) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    // 预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },
    // 打开审核弹窗
    check (id) {
      this.curId = id
      this.showPreview = true
    },
    // 关闭审核弹窗
    closeDialog () {
      this.showPreview = false
      this.getList()
    },
    // 跳转到修改页面
    change (id) {
      this.$router.push({ path: '/questions/new', query: { id: id } })
    },
    // 上架下架
    publish (res) {
      this.$confirm('您确认下架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({
          id: res.id,
          publishState: res.publishState === 1 ? 0 : 1
        })
        this.getList()// 获取列表
        this.$message({
          type: 'success',
          message: '下架成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        })
      })
    },
    // 切换上架下架文字
    showWord (show) {
      if (show === 1) {
        return '下架'
      } else {
        return '上架'
      }
    },
    // 删除
    Delete (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({
          id: id
        })
        this.getList()// 获取列表
        this.$message({
          type: 'success',
          message: '删除成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消删除'
        })
      })
    },
    // 页码变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getList()// 获取列表
    },
    // 当前页变化
    handleCurrentChange (val) {
      this.query.page = val
      this.getList()// 获取列表
    },
    // 城市联动
    getArea () {
      let citys = []
      this.provincesList.forEach(item => {
        // console.log(item.city)
        if (item.city === this.userInfo.province) {
          citys = item
        }
      })
      if (citys) {
        this.cityList = citys.area
      }
    },
    // 清除
    eliminate () {
      this.query.subject = '' // 学科
      this.query.catalog = '' // 目录
      this.query.tags = '' // 标签
      this.query.keyword = '' // 关键字
      this.query.questionType = '' // 试题类型
      this.query.creator = '' // 录入人
      this.query.remarks = '' // 题目备注
      this.query.enterprise = '' // 企业简称
      this.query.city = '' // 城市
      this.query.province = '' // 省份
      this.query.page = 1
      this.getList()
    },
    // 搜索按钮
    search () {
      const searchList = []
      this.list.forEach(item => {
        if (this.userInfo.subject === item.subject) {
          searchList.push(item)
          console.log(this.userInfo.subjectst)
        }
      })

      this.list = searchList
    }
  }
}
</script>

<style lang=scss scoped>
::v-deep .city {
  .el-input__inner {
    width: 106px;
    margin-right: 3px;
  }
}
</style>
